<template>
  <ul class="tab-bar">
    <router-link v-for="item in tabItems"
                 :key="item.path"
                 :to="item.path"
                 tag="li">
      <i class="iconfont"
         v-html="item.meta.icon"></i>
      <span>{{item.meta.title}}</span>
    </router-link>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'TabBar',
  computed: {
    // 待渲染的 tab 项数据
    tabItems() {
      return routes.filter(route => route.meta?.inTabbar) // 可选链   ??(空值合并)
      // return routes.filter(route => route.meta && route.meta.inTabbar)
      // ?. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
    },
  },
}
</script>

<style lang="less" scoped>
.tab-bar {
  display: flex;
  border-top: 1px solid #eee;
  height: 160px;

  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
}

.router-link-exact-active,
.router-link-active {
  color: #c1ab96;
}
.tab-bar {
  display: flex;
  border-top: 1px solid #eee;
  height: 96px;

  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
}

.router-link-exact-active,
.router-link-active {
  color: #f00;
}
</style>
